<template>
    <div class="visitors">
        <div class="w3layouts-main">
            <h2 style="font-size: 18px">{{ config.title }}</h2>
            <form action="javascript:;" method="post" @submit="login">
                <input type="text" class="ggg" v-model="form.username" placeholder="用户名" required="" />
                <input type="password" class="ggg" v-model="form.pwd" placeholder="密码" required="" />
                <div class="captch">
                    <input type="text" class="ggg" v-model="form.pagerandom" name="pagerandom" placeholder="验证码" required="" />
                    <img alt="刷新验证码" title="点击刷新验证码" @click="loadCaptchToInput" :src="captchUrl" unselectable="on" class="img" />
                </div>
                <select class="ggg" name="cx" v-model="form.cx">
                    <option :value="r" :key="r" :label="r" v-for="r in rules"></option>
                </select>
                <div class="clearfix"></div>
                <input type="submit" value="登录" class="btn" name="login" />
                <el-button @click="$router.go(-1)">返回</el-button>

            </form>
        </div>
    </div>
</template>
<style type="type/scss" lang="scss">
    .visitors {
        height: 100%;
        width: 100%;
        font-family: "微软雅黑", "Microsoft YaHei", "Roboto", sans-serif;
        font-size: 100%;
        overflow-x: hidden;
        background: url(@/assets/bg.jpg) no-repeat 0px 0px;
        background-size: cover;
    }

    .w3layouts-main {
        width: 30%;
        margin: 5em auto;
        background: rgba(171, 119, 157, 0.27);
        padding: 42px 35px;
        .captch {
            position: relative;
            .ggg {
                padding-right: 200px;
            }
            .img {
                position: absolute;
                right: 8px;
                top: 10px;
                cursor: pointer;
                padding-top: 10px;
                width: 100px;
                height: 45px;
                display: inline-block;
                margin-left: 10px;
            }
        }
        h2 {
            color: #131313;
            font-size: 29px;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding-bottom: 15px;
            text-align: center;
        }
        .btn {
            padding: 12px 38px;
            font-size: 18px;
            text-transform: uppercase;
            letter-spacing: 2px;
            background: #f0bcb4;
            color: white;
            border: none;
            outline: none;
            display: table;
            cursor: pointer;
            margin: 45px auto 31px;
            transition: 0.5s all;
            -webkit-transition: 0.5s all;
            -o-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -ms-transition: 0.5s all;
        }
        .btn:hover {
            background: #8b5c7e;
            transition: 0.5s all;
            -webkit-transition: 0.5s all;
            -o-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -ms-transition: 0.5s all;
        }

        .ggg {
            width: 100%;
            padding: 15px 0px 15px 15px;
            border: 1px solid #fff;
            outline: none;
            font-size: 14px;
            color: #fff;
            margin: 14px 0px;
            background: none;
        }

        select.ggg {
            option {
                /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
                border: none;
                outline: none;
                color: #000000;
                padding: 10px;
                /*很关键：将默认的select选择框样式清除*/
                appearance: none;
                -moz-appearance: none;
                -webkit-appearance: none;
                /*将背景改为红色*/
                background: transparent;
                /*加padding防止文字覆盖*/
                padding-right: 0.14rem;
            }
        }
    }

    .w3layouts-main {
        ::-webkit-input-placeholder {
            color: #fff !important;
        }
        :-moz-placeholder {
            /* Firefox 18- */
            color: #fff !important;
        }
        ::-moz-placeholder {
            /* Firefox 19+ */
            color: #fff !important;
        }
        :-ms-input-placeholder {
            color: #fff !important;
        }
    }
</style>
<script>
    import config from "@/config";
    import { canLogin } from "@/stores";
    import { captch } from "@/utils/utils";

    export default {
        name: "visitors-login",
        data() {
            return {
                config,
                captchUrl: "",
                loading: false,
                form: {
                    username: "",
                    pwd: "",
                    cx: "管理员",

                    /* 验证码段 */
                    pagerandom: "",
                    a: "a",
                    /* 验证码段 */
                },
                showCaptch: false,
                rules: ["管理员", "用户"],
            };
        },
        watch: {},
        computed: {},
        methods: {
            loadCaptchToInput() {
                this.loadCaptch();
                this.form.pagerandom = "";
                this.$refs.random.focus();
            },
            loadCaptch() {
                captch().then((res) => {
                    console.log(res);
                    this.form.captchToken = res.token;
                    this.captchUrl = res.url;
                });
            },
            login() {
                this.loading = true;
                canLogin(this.form)
                    .then((res) => {
                        this.loading = false;
                        if (res.code == 0) {
                            this.$message.success("登录成功");
                            var redirect = this.$route.query.redirect;
                            if (redirect) {
                                this.$router.replace(redirect);
                            } else {
                                this.$router.replace("/admin/sy");
                            }
                        } else {
                            this.$message.error(res.msg);
                        }
                        if (res.code == 20) {
                            this.loadCaptch();
                        }
                    })
                    .catch((err) => {
                        this.loading = false;
                        this.$message.error(err.message);
                    });
            },
        },
        created() {
            this.form.cx = this.rules[0];
            this.loadCaptch();
        },
        mounted() {},
        destroyed() {},
    };
</script>
